<template>
  <div class='container'>
    <!-- 题目预览对话框 -->
    <el-dialog
      :title="'题目预览'"
      :visible="showPreviewDialog"
      @close="close"
    >
      <!-- 第一行 -->
      <el-row type="flex" justify="content-between">
        <!-- 题型 -->
        <el-col :span="6" v-if="detailData.questionType === '1'">【题型】: 单选题</el-col>
        <el-col :span="6" v-else-if="detailData.questionType === '2'">【题型】: 多选题</el-col>
        <el-col :span="6" v-else-if="detailData.questionType === '3'">【题型】: 简答题</el-col>
        <!-- 编号 -->
        <el-col :span="6" >【编号】: {{ detailData.id }}</el-col>
        <!-- 难度 -->
        <el-col :span="6" v-if="detailData.difficulty === '1'">【难度】: 简单</el-col>
        <el-col :span="6" v-else-if="detailData.difficulty === '2'">【难度】: 一般</el-col>
        <el-col :span="6" v-else-if="detailData.difficulty === '3'">【难度】: 困难</el-col>
        <!-- 标签 -->
        <el-col :span="6" >【标签】: {{ detailData.tags }}</el-col>
      </el-row>
      <!-- 第二行 -->
      <el-row type="flex" justify="content-between" style="margin:20px 0">
        <el-col :span="6" >【学科】: {{ detailData.subjectName }}</el-col>
        <el-col :span="6" >【目录】: {{ detailData.directoryName }}</el-col>
        <el-col :span="6" >【方向】: {{ detailData.direction }}</el-col>
      </el-row>
      <hr>
      <!-- 第三行 单选/多选/简答 -->
      <!-- 单选 -->
      <el-row v-if="detailData.questionType === '1'">
        <el-col :span="24">【题干】:</el-col>
        <el-col :span="24" style="color: blue;margin: 10px 0;">{{ h52text(detailData.question) }}</el-col>
        <el-col :span="24" style="margin: 10px 0;">单选题 选项: (以下选中的选项为正确答案)</el-col>
        <el-col :span="24">
          <el-radio-group v-model="raidoRight">
            <el-row v-for="(item,index) in detailData.options" :key="index" style="padding: 8px 0;">
              <el-radio onclick="return false" :label="item.isRight">{{item.title}}</el-radio>
            </el-row>
          </el-radio-group>
        </el-col>
      </el-row>
      <!-- 多选 -->
      <el-row v-if="detailData.questionType === '2'">
        <el-col :span="24">【题干】:</el-col>
        <el-col :span="24" style="color: blue;margin: 10px 0;">{{ h52text(detailData.question) }}</el-col>
        <el-col :span="24" style="margin: 10px 0;">多选题 选项: (以下选中的选项为正确答案)</el-col>
        <el-col :span="24">
            <el-row v-for="(item,index) in detailData.options" :key="index" style="padding: 8px 0;">
              <el-checkbox onclick="return false" :checked="!!item.isRight">{{ item.title }}</el-checkbox>
            </el-row>
        </el-col>
      </el-row>
      <!-- 简答 -->
      <el-row v-if="detailData.questionType === '3'">
        <el-col :span="24">【题干】:</el-col>
        <el-col :span="24" style="color: blue;margin: 10px 0;">{{ h52text(detailData.question) }}</el-col>
      </el-row>
      <hr>
      <!-- 第四行  -->
      <el-row style="margin: 10px 0;">
        <el-col :span="24">【参考答案】: <el-button @click="showVideo=!showVideo" type="danger" align="middle" size="mini">视频答案预览</el-button></el-col>
        <el-col :span="24">
          <video v-if="showVideo" controls :src="detailData.videoURL"></video>
        </el-col>
      </el-row>
      <hr>
      <!-- 第五行  -->
      <el-row style="margin: 10px 0;">
        <el-col :span="24">【答案解析】: {{ h52text(detailData.answer) }}</el-col>
      </el-row>
      <hr>
      <!-- 第六行  -->
      <el-row style="margin: 10px 0;">
        <el-col :span="24">【题目备注】: {{ detailData.remarks }}</el-col>
      </el-row>
      <!-- 第七行 -->
      <el-row type="flex" justify="end">
        <el-button type="primary" @click="close">关闭</el-button>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import { detail } from '@/api/hmmm/questions.js'
import { html2Text } from '@/utils/index.js'

export default {
  props: {
    // 控制 显示/隐藏
    showPreviewDialog: {
      type: Boolean,
      default: false
    },
    previewRow: {
      type: Object
    }
  },
  data () {
    return {
      detailData: {},
      raidoRight: 1,
      // 控制video
      showVideo: false
    }
  },
  methods: {
    h52text (res) {
      return html2Text(res)
    },
    close () {
      // 隐藏 --- 通知父组件改值
      this.$emit('update:showPreviewDialog', false)
    },
    // 获取详情数据
    async getDetailData () {
      // 拿到数据
      const { data } = await detail(this.previewRow)
      // 将数据存在本地
      console.log(data)
      this.detailData = data
    }
  }
}
</script>

<style scoped >
::v-deep .el-radio:focus:not(.is-focus):not(:active):not(.is-disabled) .el-radio__inner {
 box-shadow: none !important;
}
</style>
